<template>
  <div class="container">
    <el-row :gutter="20" class="total">
      <el-col :span="24">
        <el-card header="组织结构">
          <div style='flex-direction: row;display: flex'>
            <el-card class='mini-card' style='background-color: #bd83f8'>
              <div style='flex-direction: row;display: flex'>
                <img src='../../assets/图片1.png' class="img-card"/>
                <div class='contant-card'>
                  <span>机构数</span>
                  <span style='margin-top: 5px'>{{card1}}个</span>
                </div>
              </div>
            </el-card>
            <el-card class='mini-card' style='background-color: #6988e6'>
              <div style='flex-direction: row;display: flex'>
                <img src='../../assets/图片2.png' class="img-card"/>
                <div class='contant-card'>
                  <span>总人数</span>
                  <span style='margin-top: 5px'>{{card2}}人</span>
                </div>
              </div>
            </el-card>
            <el-card class='mini-card' style='background-color: #fea789'>
              <div style='flex-direction: row;display: flex'>
                <img src='../../assets/图片3.png' class="img-card"/>
                <div class='contant-card'>
                  <span>今日打卡</span>
                  <span style='margin-top: 5px'>{{card3}}个</span>
                </div>
              </div>
            </el-card>
            <el-card class='mini-card' style='background-color: #5fd9a3'>
              <div style='flex-direction: row;display: flex'>
                <img src='../../assets/图片4.png' class="img-card"/>
                <div class='contant-card'>
                  <span>审批数</span>
                  <span style='margin-top: 5px'>{{card4}}个</span>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="total">
      <el-col :span="16">
        <el-card header="待办审批">
          <div style='flex-direction: row;display: flex'>
            <div style='flex-direction: column;display: flex;width:30%'>
              <el-card class='sp-card' style='background-color: #faf6ff'>
                <div style='display: flex;flex-direction: column;margin-top: 8px'>
                  <span>补卡</span>
                  <span style='font-size: 20px;color: #995dd8'>{{card5}}人</span>
                </div>
              </el-card>
              <el-card class='sp-card' style='background-color: #f0f5ff'>
                <div style='display: flex;flex-direction: column;margin-top: 8px'>
                  <span>事假</span>
                  <span style='font-size: 20px;color: #537ddb'>{{card6}}人</span>
                </div>
              </el-card>
              <el-card class='sp-card' style='background-color: #fff6f3'>
                <div style='display: flex;flex-direction: column;margin-top: 8px'>
                  <span>年休</span>
                  <span style='font-size: 20px;color: #e8714d'>{{card7}}人</span>
                </div>
              </el-card>
            </div>
            <div style='width:70%'>
              <el-card>
                <div id='main' style='width:100%;height: 360px'></div>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card header="打卡情况" class='cl-card'>
          <el-calendar v-model="value" style='height: 400px;width: 350px;margin-top: 0 !important;'>
            <template #date-cell="{ data }">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ parseInt(data.day.split('-')[2], 10) < 10 ? data.day.split('-')[2].slice(1) : data.day.split('-')[2] }}
<!--                {{ data.day.split('-').slice(1).join('-') }}-->
<!--                {{ data.isSelected ? '✔️' : '' }}-->
              </p>
              <div style='color: #007aff;display: flex;flex-direction: row'>
              {{ getDutyPerson(data.date)? '✔' : ''}}
              </div>
              <p style='color: red'>
                {{ getErrorDutyPerson(data.date)? '×' : ''}}
              </p>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, reactive } from 'vue'
import {getHomeData} from '../../api/zzjg/zzgl'

// const userId = ref('1')
const userId = JSON.parse(localStorage.getItem("user")).id
const value = ref(new Date())
// const dutySchedule = reactive({
//   '2024-05-01': '张三',
//   '2024-05-02': '李四'
// })
// const getDutyPerson=(date)=>{
//   const newDate = dateChange(date)
//   return dutySchedule[newDate] || ''
// }
// const dutySchedule = ref(['2024-05-01','2024-05-02'])
const dutySchedule = ref([])
const getDutyPerson=(date)=>{
  console.log(date)
  const newDate = dateChange(date)
  const matchIndex = dutySchedule.value.findIndex(item => item.slice(0,10) === newDate);
  return matchIndex !== -1 ? dutySchedule.value[matchIndex] : ''
}
const errorDutySchedule = ref([])
const getErrorDutyPerson=(date)=>{
  console.log(date)
  const newDate = dateChange(date)
  const matchIndex = errorDutySchedule.value.findIndex(item => item.slice(0,10) === newDate);
  return matchIndex !== -1 ? errorDutySchedule.value[matchIndex] : ''
}
//日期格式转换
const dateChange=(date)=>{
  let year = date.getFullYear()
  let month = date.getMonth()+1
  let day = date.getDate()
  month = month >= 10 ? month : ("0"+month)
  day = day >= 10 ? day : ("0"+day)
  return year+"-"+month+"-"+day
}
const getCurrentDateAndThreeDays = () => {
  const currentDate = new Date(); // 获取当前日期
  const dates = []; // 存储日期字符串的数组

  // 获取当前日期的前三天
  for (let i = 6; i >= 1; i--) {
    const prevDate = new Date(currentDate);
    prevDate.setDate(currentDate.getDate() - i);
    const formattedPrevDate = `${prevDate.getMonth() + 1}/${prevDate.getDate()}`;
    dates.push(formattedPrevDate);
  }

  // 将当前日期添加到数组中
  const formattedCurrentDate = `${currentDate.getMonth() + 1}/${currentDate.getDate()}`;
  dates.push(formattedCurrentDate);

  // 获取当前日期的后三天
  // for (let i = 1; i <= 3; i++) {
  //   const nextDate = new Date(currentDate);
  //   nextDate.setDate(currentDate.getDate() + i);
  //   const formattedNextDate = `${nextDate.getMonth() + 1}/${nextDate.getDate()}`;
  //   dates.push(formattedNextDate);
  // }

  return dates;
}
const echartDate = getCurrentDateAndThreeDays()
console.log(echartDate)
const charts =ref()
const chartArr1 = ref([])
const chartArr2 = ref([])
const chartArr3 = ref([])
const renderChart=()=>{
  charts.value.setOption({
    title: {
      text: '近7天待办审批'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['补卡', '事假', '年休'],
      textStyle: {
        fontSize: 10, // 设置字体大小
        fontWeight: 'bold', // 设置字体粗细
        // 其他字体样式属性...
      },
      right:"0"
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: echartDate
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '补卡',
        type: 'line',
        stack: 'Total',
        data: chartArr1.value
      },
      {
        name: '事假',
        type: 'line',
        stack: 'Total',
        data: chartArr2.value
      },
      {
        name: '年休',
        type: 'line',
        stack: 'Total',
        data: chartArr3.value
      }
    ]
  })
}
const card1 = ref('')
const card2 = ref('')
const card3 = ref('')
const card4 = ref('')
const card5 = ref('')
const card6 = ref('')
const card7 = ref('')
onMounted(()=>{
  charts.value=echarts.init(document.getElementById('main'))
  console.log(charts.value)
  let data = {
    id:userId
  }
  getHomeData(data).then(res=>{
    // console.log(res.data.approvalDataEchartsVO)
    chartArr1.value = res.data.approvalDataEchartsVO.buList
    chartArr2.value = res.data.approvalDataEchartsVO.shiList
    chartArr3.value = res.data.approvalDataEchartsVO.yearList
    card1.value = res.data.unitNum
    card2.value = res.data.empNum
    card3.value = res.data.todayClock
    card4.value = res.data.approvalNum
    card5.value = res.data.approvalBu
    card6.value = res.data.approvalShi
    card7.value = res.data.approvalYear
    dutySchedule.value = res.data.okClock
    errorDutySchedule.value = res.data.errorClock
    renderChart()
  })

})
</script>
<style lang="scss" scoped>

.total {
.el-card {
  //width: 100%;
  box-shadow: none !important;
  border: none;
  margin-bottom: 20px;
:deep(.el-card__header) {
  border: none;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  padding: 10px;
}

.el-card__body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  color: #fff;
  padding: 8px 10px;
  padding-bottom: 0px;
  border-radius: 50%;
  font-size: 30px;
}

.totalSell {
  background: #ff0067;
}

.pv {
  background: #098afb;
}

.totalUser {
  background: #000a01;
}

.todayAdd {
  background: #f90cff;
}

.num {
  color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow: hidden;
  display: inline-block;
  margin-left: 10px;
  vertical-align: text-bottom;
  width: calc(100% - 80px);
}
}
}
.mini-card{
  width: 24%;
  height: 110px;
  //background-color: blue;
  margin-right: 1.3%;
}
.sp-card{
  height: 110px;
  background-color: blue;
  margin-right: 1.3%;
}
.cl-card{
  height: 500px;
}
.el-calendar{
  --el-calendar-cell-width: 65px !important;
}
.img-card{
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.contant-card{
  margin-left: 10px;
  margin-top: 10px;
  flex-direction: column;
  display: flex;
  color: white;
}
</style>